<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矿业冶炼监测系统</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-image: url('bg2.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
      .container {
            display: grid;
            grid-template-areas:
                "lefton righton"
                "leftdown rightdown";
            grid-gap: 30px; /* 增大网格间距，使整体布局更宽松 */
            width: 90%;
            max-width: 1500px;
        }
      .box {
            border: 4px solid #4ddbe8;
            padding: 30px; /* 增加内边距，提供更多空间 */
            background-color: #f0f0f0;
            border-radius: 15px; /* 增大圆角半径，使外观更圆润 */
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease, transform 0.3s ease; /* 添加 transform 过渡效果 */
        }
      .box:hover {
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px); /* 鼠标悬停时元素上移，产生悬浮效果 */
        }
        #box1 {
            grid-area: lefton;
            display: grid;
            grid-template-columns: 1fr 2fr;
            grid-gap: 20px; /* 增大网格间距 */
            align-items: center;
        }
        #box1 p {
            grid-column: 1 / -1;
            margin: 0 0 30px 0;
            text-align: center;
            color: #d2691e;
            font-size: 28px; /* 增大标题字体大小 */
            font-family: "Apple Chancery", cursive;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* 添加文本阴影，增强立体感 */
        }
        #box1 label {
            text-align: right;
            padding-right: 15px; /* 增大标签的右侧内边距 */
            color: #555; /* 调整标签颜色 */
            font-size: 16px; /* 调整标签字体大小 */
        }
        #box1 input,
        #box1 button {
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 8px; /* 增大输入框和按钮的圆角半径 */
            transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* 添加 transform 过渡效果 */
        }
        #box1 input:focus,
        #box1 button:focus {
            border-color: #4ddbe8;
            box-shadow: 0 0 8px rgba(77, 219, 232, 0.5);
            transform: scale(1.05); /* 聚焦时元素放大 */
        }
        #box2 {
            grid-area: righton;
        }
        #box3 {
            grid-area: rightdown;
        }
        #box4 {
            grid-area: leftdown;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 增大设备控制元素的最小宽度 */
            grid-gap: 30px; /* 增大设备控制元素的间距 */
            justify-items: center;
        }
        #box4 p {
            grid-column: 1 / -1;
            margin: 0 0 30px 0;
            text-align: center;
            color: #d2691e;
            font-size: 28px;
            font-family: "Apple Chancery", cursive;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        #box4 legend {
            margin-left: 0;
            color: #8b4513;
            font-size: 18px; /* 增大 legend 字体大小 */
        }
        #box4.son, #box4.son2 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: auto;
            border: 1px solid rgba(0, 0, 0, 0);
            
        }
        #temperature,
        #weight,
        #sapressure,
        #pressure,
        #hydrogen,
        #inhydrogen {
            width: 100%;
            height: 35px; /* 增大输入框高度 */
        }
        #myVideo {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }
        p {
            text-align: center;
           color: #d2691e;
            font-size: 30px;
            font-family: "Apple Chancery", cursive;
        }
      .parent {
            display: flex;
            align-items: flex-start;
            justify-content: space-around;
            flex-wrap: wrap;
        }
      .son2 {
            margin-left: 0;
        }
        img {
            width: 90px; /* 增大图片大小 */
            height: 90px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        img:hover {
            transform: scale(1.15); /* 增大图片鼠标悬停时的放大效果 */
        }
        input[type="button"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            padding: 12px 24px; /* 增大按钮内边距 */
            transition: background-color 0.3s ease, transform 0.3s ease; /* 添加 transform 过渡效果 */
        }
        input[type="button"]:hover {
            background-color: #45a049;
            transform: scale(1.05); /* 按钮鼠标悬停时放大 */
        }
        @media (max-width: 768px) {
          .container {
                grid-template-areas:
                    "lefton"
                    "righton"
                    "leftdown"
                    "rightdown";
            }
            #box1, #box2, #box3, #box4 {
                width: 100%;
            }
        }
        button{
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            padding: 12px 24px; /* 增大按钮内边距 */
            transition: background-color 0.3s ease, transform 0.3s ease; /* 添加 transform 过渡效果 */
            
        }
        button:hover {
            background-color: #45a049;
            transform: scale(1.05); /* 按钮鼠标悬停时放大 */
        }
      .chart-container {
            width: 100%;
            height: 300px; /* 固定图表容器的高度，避免布局跳动 */
        }
      .chart-container canvas {
            width: 100%;
            height: 100%;
        }
      .device-control-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center; /* 设备控制元素内部文本居中 */
            animation: fadeIn 0.5s ease forwards; /* 为设备控制元素添加淡入动画 */
        }
      .device-control-item img {
            margin-bottom: 10px; /* 图片和文字之间添加间距 */
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
    <script>
        function set(id,src) {
            var set = new XMLHttpRequest();//创建对象
            var url = "";
            set.open("post", url, true)
            if (id == "fengshan") {
                if (src="shanoff.png") {
                    set.send("\"fs=0\"");
                }
                else if (src="shanon.png") {
                    set.send("\"fs=1\"");
                }
            }
            else if (id == "deng") {
                if (src="night.png") {
                    set.send("\"d=0\"");
                }
                else if (src="sun.png") {
                    set.send("\"d=1\"");
                }
            }
            else if (id=="jingbao") {
                if (src="jbclose.png") {
                    set.send("\"jb=0\"");
                }
                else if (src="jbopen.png") {
                    set.send("\"jb=1\"");
                }
            }
        }
        function changeImage_fengshan(id,src) {
            var set = new XMLHttpRequest();//创建对象
            var url = "";
            set.open("post", url, true)
            var image1 = document.getElementById('fengshan');
            if (image1.src.match("shanoff.png")) 
            {
                set.send("\"fs=1\"");
                image1.src = "shanon.png"; // 切换到第二张图片   
                       
            } 
            else 
            {
                set.send("\"fs=0\"");
                image1.src = "shanoff.png"; // 切换回第一张图片
               
            }
        }
        function changeImage_deng() {
            var image2 = document.getElementById('deng');
            var set = new XMLHttpRequest();//创建对象
            var url = "";
            set.open("post", url, true)
            if (image2.src.match("night.png")) 
            {
                image2.src = "sun.png"; 
                set.send("\"d=1\"");               
            } 
            else 
            {
                image2.src = "night.png"; 
                set.send("\"d=0\"");
            }
        }
        function changeImage_jingbao() {
            var set = new XMLHttpRequest();//创建对象
            var url = "";
            set.open("post", url, true)
            var image3 = document.getElementById('jingbao');
            if (image3.src.match("jbclose.png") ) 
            {
                image3.src = "jbopen.png";     
                set.send("\"jb=1\"");        
            } 
            else 
            {
                image3.src = "jbclose.png"; 
                set.send("\"jb=0\"");
            }
        }

        function changeImage_men() {
            var set = new XMLHttpRequest();//创建对象
            var url = "";
            set.open("post", url, true)
            var image3 = document.getElementById('men');
            if (image3.src.match("menclose.png")) 
            {
                image3.src = "menopen.png";     
                set.send("\"m=1\"");        
            } 
            else 
            {
                image3.src = "menclose.png"; 
                set.send("\m=0\"");
            }
        }

        function changeImage_mcu() {
            var set = new XMLHttpRequest();//创建对象
            var url = "";
            set.open("post", url, true)
            var image3 = document.getElementById('mcu');
            if (image3.src.match("mcuclose.png")) 
            {
                image3.src = "mcuopen.png";     
                set.send("\"mcu=1\"");        
            } 
            else 
            {
                image3.src = "mcuclose.png"; 
                set.send("\mcu=0\"");
            }
        }

        function startCamera() {
            // 检查浏览器是否支持getUserMedia API
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                // 请求访问摄像头
                navigator.mediaDevices.getUserMedia({ video: true })
                  .then(function(stream) {
                        // 获取video元素
                        var video = document.getElementById('myVideo');
                        // 将视频流设置为video元素的源
                        video.srcObject = stream;
                        video.play(); // 开始播放视频流
                    })
                  .catch(function(err) {
                        // 处理错误情况
                        console.error("无法访问摄像头: ", err);
                    });
            } else {
                console.error("您的浏览器不支持getUserMedia API");
            }
        }

        function get() {
          
            var v = document.getElementsByName("username");
         
            var get = new XMLHttpRequest();
            var url = "";

            get.open("post", url, true);
            get.send("\"get\"");

            get.onreadystatechange = function ()
            {
                if (get.readyState === 4 && get.status === 200) {
                    var z = get.responseText;
                    var x = z.split(",");
                    v[0].value = x[0];
                    v[1].value = x[1];
                    v[2].value = x[2];
                    v[3].value = x[3];
                    v[4].value = x[4];
                    v[5].value = x[5];
                }
            }
        }
        setInterval(get, 1000);
        
    </script>
</head>
<body>
    <div class="container">
        <!-- 左上区域 -->
        <div id="box1" class="box lefton">
            <p>数据采集</p>
            <div class="input-group">
                <label for="temperature">温度:</label>
                <input type="text" id="temperature" name="username" placeholder="(℃)" readonly value>
            </div>
            <div class="input-group">
                <label for="weight">物料重量:</label>
                <input type="text" id="weight" name="username" placeholder="(kg)" readonly value>
            </div>
            <div class="input-group">
                <label for="sapressure">大气压强:</label>
                <input type="text" id="sapressure" name="username" placeholder="(Pa)" readonly>
            </div>
            <div class="input-group">
                <label for="pressure">炉内压强:</label>
                <input type="text" id="pressure" name="username" placeholder="(Pa)" readonly>
            </div>
            <div class="input-group">
                <label for="hydrogen">氢气浓度:</label>
                <input type="text" id="hydrogen" name="username" placeholder="(ppm)" readonly>
            </div>
            <div class="input-group">
                <label for="inhydrogen">室内氢气浓度:</label>
                <input type="text" id="inhydrogen" name="username" placeholder="(ppm)" readonly>
            </div>
            <input type="button" value="刷新" onclick="get()">
        </div>
        <!-- 右上区域 -->
        <div id="box2" class="box righton">
            <video id="myVideo" width="640" height="360" autoplay></video>
            <button onclick="startCamera()">启动摄像头</button>
        </div>


        <!-- 右下区域 -->
        <div id="box3" class="box rightdown">
            <p>历史记录</p>
            <div class="chart-container">
                <canvas id="realtimeLineChart"></canvas>
            </div>

            <script>
                // 模拟数据存储数组
                var dataPoints = [];
                var labelPoints = [];
                var maxDataPoints = 15;
        
                // 初始化图表
                var ctx = document.getElementById('realtimeLineChart').getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labelPoints,
                        datasets: [{
                            label: '实时数据',
                            data: dataPoints,
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            x: {
                                display: true,
                                title: {
                                    display: true,
                                    text: '时间点'
                                }
                            },
                            y: {
                                display: true,
                                title: {
                                    display: true,
                                    text: '温度值'
                                },
                                beginAtZero: true
                            }
                        }
                    }
                });
        
                // 模拟实时数据生成函数
                function generateData() {
                    var newData = Math.floor(Math.random() * 100);
                    var newLabel = new Date().toLocaleTimeString();
                    dataPoints.push(newData);
                    labelPoints.push(newLabel);
        
                    if (dataPoints.length > maxDataPoints) {
                        dataPoints.shift();
                        labelPoints.shift();
                    }
        
                    // 更新图表数据
                    myChart.data.labels = labelPoints;
                    myChart.data.datasets[0].data = dataPoints;
                    myChart.update();
                }
        
                // 定时调用生成数据函数，实现实时刷新
                setInterval(generateData, 5000);
            </script>
        </div>


        <!-- 左下区域 -->
        <div id="box4" class="box leftdown">
            <p>设备控制</p>
            <div class="parent">
                <div class="son device-control-item">
                    <legend>排气扇</legend>
                    <img id="fengshan" src="shanoff.png" onclick="changeImage_fengshan(id,src)" alt="点击切换图片" width="90" height="90">
                </div>
                <div class="son2 device-control-item">
                    <legend>照明灯</legend>
                    <img id="deng" src="night.png" onclick="changeImage_deng()" alt="点击切换图片" width="90" height="90">
                </div>
                <div class="son2 device-control-item">
                    <legend>警报</legend>
                    <img id="jingbao" src="jbclose.png" onclick="changeImage_jingbao()" alt="点击切换图片" width="90" height="90">
                </div>
                <div class="son2 device-control-item">
                    <legend>大门</legend>
                    <img id="men" src="menclose.png" onclick="changeImage_men()" alt="点击切换图片" width="90" height="90">
                </div>
                <div class="son2 device-control-item">
                    <legend>MCU</legend>
                    <img id="mcu" src="mcuclose.png" onclick="changeImage_mcu()" alt="点击切换图片" width="90" height="90">
                </div>
            </div>
        </div>
    </div>
</body>
</html>